<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
   <div id="app">
       <cpn></cpn>
   </div>

   <template id="cpn">
       <ccpn></ccpn>
   </template>

   <template id="ccpn">
       <div>
           <div>我是子组件</div>
           <button @click="btnClick">按钮</button>
       </div>
   </template>
</body>

<script>
   const app = new Vue({
       el:"#app",
       data:{
           message:"你好啊！"
       },
       components:{
           cpn:{

               template:"#cpn",
               data(){
                   return{
                        name:"我是cpn组件的name"
                   }
               },
               components:{
                   ccpn:{
                       template:"#ccpn",
                       methods:{
                           btnClick(){
                               //访问父组件$parent
                               console.log(this.$parent.name);
                               //访问根组件$root
                               console.log(this.$root);
                           }
                       },
                   }
               }
           }
       }
   });


</script>

</html>